<!--
 * @Descripttion: 招商管理-招商经理管理
 * @version: 
 * @Author: lehaixia
 * @Date: 2023-04-18 09:26:15
 * @LastEditors: lehaixia
 * @LastEditTime: 2023-05-06 09:56:42
-->
<template>
  <div class="has-top-pt">
    <div class="ctm-content-head-fixed">
      <SearchInput
        v-model="searchValue"
        placeholder="输入招商经理名称/电话"
        :show-action="false"
        @search="onSearch"
        @clear="onClear"
        @cancel="onSearch"
      />
    </div>

    <div>
      <div class="customer-list">
        <ManagerList ref="list" :search-value="searchValue" />
      </div>
    </div>
    <div class="ctm-content-foot">
      <qmp-button type="primary" round class="btn ctm-btn-main" @click="toAddPage">新增招商经理</qmp-button>
    </div>
  </div>
</template>

<script lang="ts">
  import { reactive, toRefs, onMounted, getCurrentInstance, onActivated } from 'vue'
  import { onBeforeRouteLeave } from 'vue-router'
  import SearchInput from '@/components/SearchInput/index.vue'
  import ManagerList from './components/ManagerList.vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'

  export default {
    name: 'LeasingManager',
    components: { SearchInput, ManagerList },
    setup() {
      const { proxy, type }: any = getCurrentInstance()

      const datas = reactive({
        searchValue: '',
        listReLoad: false // 是否需要重新加载列表
      })
      const $router = useRouter()
      const $store = useStore()

      const onSearch = () => {
        // 搜索
        proxy.$refs.list.resetPageData()
      }
      const onClear = () => {
        // 搜索
      }
      // 新增招商经理
      const toAddPage = (row: any) => {
        $router.push({
          path: '/leasingManager/add',
          query: {
            id: row.id
          }
        })
      }
      onMounted(() => {})
      onBeforeRouteLeave((to, from) => {
        const instanceName = type?.name
        if (to.name === 'Index') {
          $store.commit('routerKeep/removeCache', instanceName)
        } else {
          $store.commit('routerKeep/resetCache', instanceName)
        }
      })

      proxy.$SimpleEvents.registerEvent('refreshCustomerChangeItem', (id: any) => {
        // 新增
        // if (!id) {
        datas.listReLoad = true
        // return
        // }
        // 编辑
        // proxy.$refs.list.refreshItem(id)
      })

      onActivated(() => {
        // 缓存路由才生效
        if (datas.listReLoad) {
          proxy.$refs.list.resetPageData()
        }
        datas.listReLoad = false
      })
      return {
        ...toRefs(datas),
        onSearch,
        onClear,
        toAddPage
      }
    }
  }
</script>
<style lang="less" scoped>
  .customer-list {
    position: relative;
    padding: 8px 14px 58px;
  }
</style>
